<template>
  <div
    style="height: 523px; overflow: hidden; background: white; border:1px solid white ; border-radius: 8px; margin-top: 10px;">
    <div style="background-color: #E9EEF3; height: 95px; margin: 10px; padding: 4px; border-radius: 7px;">
      <el-row style="margin-top: 14px;">
        <el-col :span="10" style="font-size: 14px;">
          产品一级分类&nbsp;
          <el-select size="mini">
            <el-option value="dasd">请选择</el-option>
          </el-select>
        </el-col>
        <el-col :span="10" style="font-size: 14px;">
          产品二级分类&nbsp;
          <el-select size="mini">
            <el-option value="dasd">请选择</el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row style="margin-top: 14px;">
        <el-col :span="10" style="font-size: 14px;">
          产品三级分类&nbsp;
          <el-select size="mini">
            <el-option value="dasd">请选择</el-option>
          </el-select>
        </el-col>
        <el-col :span="2" style="font-size: 14px;margin-left: 73px;">
          产品名称
        </el-col>
        <el-col :span="5" style="font-size: 14px;">
          <el-input size="mini"></el-input>
        </el-col>
      </el-row>
    </div>
    <div style="background-color: #E9EEF3; height: 385px; margin: 10px; padding: 4px; border-radius: 7px;">
      <template>
        <el-table :data="tableData" style="width: 100%;height: 340px;">
          <el-table-column prop="tid" label="产品编号" width="372">
          </el-table-column>
          <el-table-column prop="pName" label="产品名称" width="100">
          </el-table-column>

          <el-table-column prop="levelName" label="档次级别" width="100">
          </el-table-column>
          <el-table-column prop="opName" label="I级分类" width="100">
          </el-table-column>
          <el-table-column prop="tpName" label="II级分类" width="100">
          </el-table-column>
          <el-table-column prop="thrpName" label="III级分类" width="100">
          </el-table-column>
          <el-table-column label="制定" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="zhisjd(scope.row)" round="">制定工序单</el-button>
            </template>
          </el-table-column>

        </el-table>
      </template>
      <div class="block" style="margin-top: 15px;">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
          :page-sizes="[1,2,7]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>


    <el-dialog title="生产工序设计单" :visible.sync="dialogVisible" width="62%" height="300px" :before-close="handleClose">
      <p style="margin-left: 532px;margin-bottom: 20px;">
        <el-button style="width: 75px ; height: 25px;" @click="addprocess()" type="primary">添加工序</el-button>
        <el-button style="width: 75px ; height: 25px;" type="danger" @click="delprocess()"
          :disabled='multipleSelection.length>0?false:true'>删除工序</el-button>
      </p>
      <el-form :model="proproSheet">
      <el-row>
        <el-col :span="6">
          <h4>产品名称:{{ this.proproSheet.pName}}</h4>
        </el-col>
        <el-col :span="18">
          <!-- this.pro_cess.pName = data.pName;
        this.pro_cess.proSige_id = data.tid; -->
          <h4 style="text-align: right; margin-right: 22px;">产品编号:{{ this.proproSheet.proSige_id}}</h4>
        </el-col>
      </el-row>
      <el-row style="margin-top: 14px;">
        <el-col :span="2">
          <h4 style="text-align: right; ">设计人:</h4>
        </el-col>
        <el-col :span="4">
          <input v-model="proproSheet.designer" style="border-radius: 4px; text-align: left;margin-left: -7px;  "
            class="boder_one" />
        </el-col>
      </el-row>

      <el-table border ref="multipleTable" :data="tableData1" tooltip-effect="dark"
        style="width: 100%;margin-top: 25px;" @selection-change="handleSelectionChange" size="mini">
        <el-table-column type="selection" width="55" size="mini">
        </el-table-column>
        <el-table-column prop="gxname" label="工序名称" width="80">
        </el-table-column>
        <el-table-column prop="processesid" label="工序编号" width="80">
        </el-table-column>
        <el-table-column prop="desc" label="描述" width="97">
        </el-table-column>
        <el-table-column label="工时数" width="95">
          <template slot-scope="scope">
            <el-input v-model="scope.row.gongShiNum" size="mini" controls-position="right" style="width: 55px"
              class="inputClass">
            </el-input>
          </template>
        </el-table-column>
        <el-table-column prop="personNo" label="工时单位" width="95">
          <template slot-scope="scope">
            <el-input v-model="scope.row.gSunit" controls-position="right" size="mini" style="width: 55px"
              class="inputClass">
            </el-input>
          </template>
        </el-table-column>
        <el-table-column label="单位工时成本" width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.unitGSPrice" controls-position="right" size="mini" style="width: 75px"
              class="inputClass">
            </el-input>
          </template>
        </el-table-column>
        <el-table-column label="工时成本小计(元)" width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.gSsumPrice= scope.row.gongShiNum*scope.row.unitGSPrice "
              controls-position="right" size="mini" style="width: 75px" class="inputClass">
            </el-input>
          </template>
        </el-table-column>
      </el-table>
      <!-- designer -->
      <el-row style="margin-top: 25px;">
        <el-col :span="2">
          <h4 style="text-align: right; ">登记人</h4>
        </el-col>
        <el-col :span="4">
          <input v-model="proproSheet.redner" style="border-radius: 4px; text-align: left;margin-left: -7px;"
            class="boder_one" />
        </el-col>
        <el-col :span="18">
          <h4 style="text-align: right; margin-right: 18px;">登记时间 : {{this.proproSheet.regtime}}</h4>
        </el-col>
      </el-row>
      <p style="margin-top: 12px;">
      <h4 style="margin-right:645px">设计要求:</h4>
      <textarea v-model="proproSheet.designreq"
        style="margin-top: 6px;margin-right:0px;width: 704px; height: 85px;"></textarea>
      </p>
      </el-form>
      <span slot="footer">
        <el-button style="width: 45px ; height: 25px;" @click="closeW()">取 消</el-button>
        <el-button style="width: 45px ; height: 25px;" type="primary" @click="makeprocess_2()">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="添加工序" :visible.sync="dialogVisible2" width="62%" height="300px" :before-close="handleClose">
      <el-table border ref="multipleTable2" :data="tableData2" tooltip-effect="dark"
        style="width: 100%;margin-top: 25px;" @selection-change="handleSelectionChange2" size="mini">
        <el-table-column type="selection" width="55" size="mini">
        </el-table-column>
        <el-table-column label="工序编号" width="140">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column prop="gxname" label="工序名称" width="140">
        </el-table-column>
        <el-table-column prop="desc" label="工序描述" width="140">
        </el-table-column>
        <el-table-column prop="personNo" label="负责人编号" width="140">
        </el-table-column>
        <el-table-column label="变更" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="add_process1(scope.row.id)" round="">添加工序</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 15px;">
        <el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2" :current-page="pageNum2"
          :page-sizes="[1,2,7]" :page-size="pageSize2" layout="total, sizes, prev, pager, next, jumper" :total="total2">
        </el-pagination>
      </div>
      <span slot="footer">
        <el-button style="width: 45px ; height: 25px;" @click="dialogVisible2 = false">关闭</el-button>
        <el-button style="width:  80px ; height: 25px;" type="primary" @click="add_process()"
          :disabled='multipleSelection2.length>0?false:true'>批量添加</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'repset',
    data() {
      return {
        pageNum: 1,
        pageSize: 7,
        total: 0,
        pageNum2: 1,
        pageSize2: 7,
        total2: 0,
        tableData: [],
        tableData1: [],
        tableData2: [],
        dialogVisible: false,
        dialogTableVisible: false,
        dialogFormVisible: false,
        dialogVisible2: false,
        multipleSelection: [],
        multipleSelection2: [],
        pro_cess: {
          proSige_id: 0, //产品id
          pName: '' //产品名称
        },
        mpsDto: {
          proproSheet: {},
          dproList: []
        },
        proproSheet: {
          proSige_id: '',
          regtime: '',
          designer: '',
          redner: '',
          designreq: '',
          pName: ''
        },
        form: {
          id: '',
          gxname: '',
          pName: '',
          desc: '',
          personNo: '',
          proSige_id: '',
          gongShiNum: '', //工时数
          gSunit: '', //工时单位
          unitGSPrice: '', //单位公时成本
          gSsumPrice: '' //公时小计
        },
        formLabelWidth: '120px'
      }
    },
    methods: {
      closeW(){
        this.tableData1=null;
        this.dialogVisible = false;
      }
      ,
      tableRowClassName({
        row,
        rowIndex
      }) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.GetOnline(this.pageNum, this.pageSize);
      },
      handleCurrentChange(val) {
        this.pageNum = val;
        this.GetOnline(this.pageNum, this.pageSize);
      },
      handleSizeChange2(val) {
        this.pageSize2 = val;
        this.addpro(this.pageNum2, this.pageSize2);
      },
      handleCurrentChange2(val) {
        this.pageSize2 = val;
        this.addpro(this.pageNum2, this.pageSize2);
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
            this.$refs.multipleTable2.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
          this.$refs.multipleTable2.clearSelection();
          this.multipleSelection = [];
          this.multipleSelection2 = [];
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = [];
        for (var i = 0; i < val.length; i++) {
          this.multipleSelection.push(val[i].id)
        }
        console.log(this.multipleSelection);

      },
      handleSelectionChange2(val) {
        this.multipleSelection2 = [];
        for (var i = 0; i < val.length; i++) {
          this.multipleSelection2.push(val[i].id)
        }
        console.log(this.multipleSelection2);
      },
      GetOnline(pageNum, pageSize) {
        var data = new URLSearchParams();
        data.append("pageNum", pageNum);
        data.append("pageSize", pageSize);
        this.$http.post('production/product/makeProByPager', data).then(res => {
          this.pageNum = res.data.pageNum;
          this.pageSize = res.data.pageSize;
          this.total = res.data.total;
          this.tableData = res.data.rows;
        }).catch(err => {
          console.log(err);
        })
      },
      addpro(pageNum, pageSize) {
        var data = new URLSearchParams();
        data.append("pageNum", pageNum);
        data.append("pageSize", pageSize);
        this.$http.post('production/product/getList  ', data).then(res => {
          this.pageNum2 = res.data.pageNum;
          this.pageSize2 = res.data.pageSize;
          this.total2 = res.data.total;
          this.tableData2 = res.data.rows;
        }).catch(err => {
          console.log(err);
        })
      },
      addprocess() {
        this.addpro(this.pageNum2, this.pageSize2);
        this.dialogVisible2 = true;

      },
      add_process() {
        var newarray = this.multipleSelection2;
        var newlen = this.tableData2;
        for (var i = 0; i < newarray.length; i++) {
          var num = this.tableData2.findIndex(item => {
            if (newarray[i] == item.id) {
              return true;
            }
          })
          var new_table_item = {
            proSige_id: this.proproSheet.proSige_id,
            processesid: this.tableData2[num].id,
            desc: this.tableData2[num].desc,
            gxname: this.tableData2[num].gxname,
            gongShiNum: 0,
            gSunit: '',
            unitGSPrice: 0,
            gSsumPrice: 0
          };
          if (this.tableData2.length == 0) {
            this.tableData1.push(new_table_item);
          } else {
            var falg = false;
            for (var i = 0; i < this.tableData1.length; i++) {
              if (this.tableData1[i].processesid == this.tableData2[num].id) {
                falg = true; //前端传数组后端用集合接收
              }
            }
            if (!falg) {
              this.tableData1.push(new_table_item);
            }
          }
          this.dialogVisible2 = false;
        }
      },
      add_process1(id) {
        var num = this.tableData2.findIndex(item => {
          if (id == item.id) {
            return true;
          }
        });
        var new_table_item = {
          proSige_id: this.proproSheet.proSige_id,
          processesid: this.tableData2[num].id,
          desc: this.tableData2[num].desc,
          gxname: this.tableData2[num].gxname,
          gongShiNum: 0,
          gSunit: '',
          unitGSPrice: 0,
          gSsumPrice: 0
        };
        if (this.tableData2.length == 0 ) {
          this.tableData1.push(new_table_item);
        } else {
          var falg = false;
          for (var i = 0; i < this.tableData1.length; i++) {
            if (this.tableData1[i].processesid == this.tableData2[num].id) {
              falg = true;
            }
          }
          if (!falg) {
            this.tableData1.push(new_table_item);
          }
        }
      },
      delprocess() {
        var it = this.multipleSelection;
        for (var i = 0; i < it.length; i++) {
          var index = this.tableData1.indexOf(item => {
            if (it[i].id == item.id) {
              return true;
            }
          })
          this.tableData1.splice(index, 1);
        }
      },
      zhisjd(data) {
        this.proproSheet.pName = data.pName;
        this.proproSheet.proSige_id = data.tid;
        this.proproSheet.regtime = this.timer;
        this.dialogVisible = true;
      },
      makeprocess_2() {
       var  falg =true;
       for (var i = 0; i < this.tableData1.length; i++) {
         if(this.tableData1[i].gSsumPrice==0 ||this.tableData1[i].gSsumPrice==0){
             falg =false;

         }
       }
      if(falg ==false){
           alert('有工序单位和成本没有设置')
           return;
      }






        var data = new URLSearchParams();
        this.mpsDto.proproSheet = this.proproSheet;
        this.mpsDto.dproList = this.tableData1;
        this.$http.post('product/addNewMakeProcess', this.$qs.stringify(this.mpsDto, {
          arrayFormat: 'list',
          allowDots: true
        })).then(res => {
          if (res.status == 200) {
            this.$message({
              message: '制定成功,等待审核',
              type: 'success'
            });
            this.tableData1 = [];
            this.dialogVisible = false;
            this.GetOnline(this.pageNum,this.pageSize);
          }
        }).catch(err => {
          console.log(err);
        })
        this.proproSheet.regtime = '';

      }
    },
    computed: {
      timer() {
        var date = new Date();
        var seperator1 = "-";
        var seperator2 = ":";
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }

        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate +
          " " + date.getHours() + seperator2 + date.getMinutes() +
          seperator2 + date.getSeconds();

        return currentdate;
      }
    },
    mounted() {
      this.GetOnline(this.pageNum, this.pageSize);

    }
  }
</script>

<style scoped="scoped">
  .el-input--mini .el-input__inner {
    height: 20px;
    line-height: 28px;
  }

  * {
    padding: 0px;
    margin: 0px;
  }

  .boder_one {
    border-top: none;
    border-left: none;
    border-right: none;
    width: 105px;
  }


  th {
    background-color: blue;
  }

  .el-table tr {
    background-color: royalblue;
  }

  .el-breadcrumb__inner {
    color: black;

  }

  .el-input__inner {

    height: 25px;

  }

  .el-input__prefix,
  .el-input__suffix {
    position: absolute;
    top: 7px;
    -webkit-transition: all .3s;
    height: 100%;
    color: #C0C4CC;
    text-align: center;
  }

  .el-table td {
    padding: 10px 0;
  }

  #father {
    height: 480px;
    overflow: hidden;
    background: white;
    border: 1px solid white;
    border-radius: 12px;

  }

  #sons {
    /* margin: 9px auto; */

    width: 100%;
    padding: 0px;
    background-color: white;
    margin-top: 15px;
    /* border: 3px solid whitesmoke; */
    /* border-radius: 16px; */

  }

  #son {

    padding: 15px;
    width: 100%;
    background-color: white;

  }
</style>
